<template>
  <uni-card spacing="0" padding="0">
    <view class="row" >
      <uni-row>
        <uni-col :span="2"  >
          <image class="icon" :src="user"/>
        </uni-col>
        <uni-col :span="17">
          <text class="leftCol">{{analyData}} 您好!</text>
        </uni-col>
        <uni-col :span="4" :push="1">
          <rich-text @click="open" class="rightCol">{{ current }}</rich-text>
        </uni-col>
      </uni-row>
    </view>
    <uni-popup ref="pop">
      <view>
        <uni-table>
          <radio-group @change="radioChange" style="text-align: left">
            <uni-tr v-for="(item, index) in items" :key="item.name">
              <view class="radio-item" style="margin-top: 24rpx;width: 600rpx;padding-bottom: 5rpx">
                <radio :value="item.value" :checked="index === current" activeBorderColor="#007AFF"
                       style="width: 600rpx;text-align: left">
                  {{ item.value }}
                </radio>
              </view>
            </uni-tr>
          </radio-group>
        </uni-table>
      </view>
    </uni-popup>
  </uni-card>
</template>
<script setup>
import user from '@/static/images/index/user.png'
import {ref,onMounted} from "vue";
import {profile} from '@/api/report';
const pop = ref()
const analyData = ref();
onMounted(() => {
  profile().then(result => {
analyData.value=result.data.dept.deptName
  })

})
const open = () => {
  pop.value.open('center');
}

const current = ref('全部期');

const items = [
  {name: 'all', value: '全部期'},
  {name: 'first', value: '第一期'},
  {
    name: 'second',
    value: '第二期'
  },
  {name: 'third', value: '第三期'}
];

const radioChange = (evt) => {
  current.value = evt.detail.value;
  for (let i = 0; i < items.length; i++) {
    if (items[i].value === evt.detail.value) {

      break;
    }
  }
}
</script>
<style lang="scss" scoped>
.radio-item {
  width: 300 rpx;
  text-align: center;
}

.row {
  padding: 20rpx;
  color: black;

  .icon {
    width: 35rpx;
    height: 35rpx;
    margin-left: 5rpx;
  }

  .leftCol {
    font-size: 32rpx;
    margin-left: -10rpx;
  }

  .rightCol {
    font-size: 28rpx;
  }
}
</style>
